<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>二维码登录</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
	</head>
	<style>
		*{
			margin: 0;
		}
	</style>
	<body style="background-color: dimgrey;width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;">
		<div id="app" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
			<div id="qrcode"></div>
			<div style="margin-top: 20px;color: white;">{{message}}</div>
		</div>
	</body>
	<script>
		new Vue({
		  el: '#app',
		  data: {
			 message:"请用APP进行扫描登录",
			 websock:null,
		  },
		  mounted() {
			let This = this;
			axios.get('http://127.0.0.1:10010/user/qr/code')
			      .then(res =>{
					  if(res.data.code == 200){
						  new QRCode(document.getElementById('qrcode'), res.data.message);
						 
						  // 连接websocket
						  This.connectionWebsocket(res.data.message);
						  
					  }else{
						  alert("服务器好像没开吧....");
					  }
				  })
			      .catch(function (error) { // 请求失败处理
			        console.log(error);
			      });
			
		  	
		  },
		  methods:{
		     connectionWebsocket(code){
				 let This = this;
				const wsuri = "ws://387d4s.natappfree.cc/websocket/"+code;
				//连接服务端
				this.websock = new WebSocket(wsuri);
				//指定事件回调
				this.websock.onmessage = (e)=>{
					this.message = e.data;
				}
			 }
		  },
		})
	</script>
</html>
